import React from "react";
import GoBack from "@/components/TheGoBack";
import TheUpload from "@/components/TheUpload";
import { Button, Form, Input, Space, Radio, Timeline } from "antd";
import _ from 'lodash'
import { apiBannerAdd, apiBannerOne, apiBannerEdit, apiGetLog } from '@/request/petCircleUtil/banner'
import "../style/style.less"

class Edit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            urlType: 1,
            fileList: [],
            logArr: [],
            visible: false,
            btnLoading: false,
            AdID: '',
            fileType: 'image',
            maxSize: 5,
            initialValues: {
                bannerType: 2,
                linkType: 1,
                bannerName: "",
                linkUrl: "",
                bannerImages: "",
                remark: ""
            },
            configCarouselUri: '',
        };
    }

    async componentDidMount() {
        const { id } = this.props.match.params
        console.log("id", id);
        this.setState({
            AdID: id,
        })
        if (id != 0) {
            await this.getData(id)
        }
        //操作日志
        const rest = await apiGetLog({ dataType: 5, dataId: id })
        if (rest.code === 0 && rest.data) {
            this.setState({
                logArr: rest.data
            })
        }

    }

    getData = async (bannerId) => {
        console.log();
        let res = await apiBannerOne(bannerId)
        if (res.code === 0 && res.data) {
            let fileList = [
                {
                    uid: '-1',
                    name: 'image.png',
                    status: 'done',
                    url: res.data.bannerImages,
                },
            ]

            this.setState({
                urlType: res.data.linkType,
                fileList: [...fileList],
            }, () => {
                this.formRef.setFieldsValue({
                    ...res.data,
                })
            })
        }
    }
    //form表单确定事件
    onFinish = async (values) => {
        this.setState({ btnLoading: true })
        if (this.state.AdID == 0) {
            // 添加
            let res = await apiBannerAdd({ ...values })
            if (res.code === 0) {
                React.$message({
                    type: 'info',
                    content: '添加成功'
                })
                this.props.history.goBack()
            } else {
                this.setState({ btnLoading: false })
            }
        } else {
            if (values.linkType == 2) values.linkNo = ""
            // 编辑
            let res = await apiBannerEdit({
                bannerId: this.state.AdID,
                ...values,
            })
            if (res.code === 0) {
                React.$message({
                    type: 'info',
                    content: '编辑成功'
                })
                this.props.history.goBack()
            } else {
                this.setState({ btnLoading: false })
            }
        }
    }
    // 资源位类型选择
    typeChange = e => {
        console.log(`radio checked:${e.target.value}`);
    }
    //跳转链接类型选择
    urlChange = e => {
        this.setState({
            urlType: e.target.value
        })
    }
    onCancel = () => {
        this.setState({
            visible: false
        })
    }

    // 图片上传回调
    getDetailsFileResult = value => {
        if (value && value.length) {
            let arr = value.map(v => {
                if (v.response && v.response.code === 0) {
                    return v.response.data
                } else {
                    return v.url
                }
            }).join(',')
            this.formRef.setFieldsValue({
                bannerImages: arr
            })
        } else {
            this.formRef.setFieldsValue({
                bannerImages: ""
            })
        }
    }

    render() {
        let {
            initialValues,
            AdID,
            logArr,
            fileList,
            btnLoading,
            fileType,
            maxSize,
            urlType,
        } = this.state;

        return (
            <div className="m-flex">
                <div className="commodity-list-detail p-layout-box" style={{ height: "90vh" }}>
                    <GoBack history={this.props.history} title={AdID == 0 ? "新建资源位配置" : "修改资源位配置"} />
                    <div className="p-layout-content">
                        <Form onFinish={this.onFinish}
                            ref={ref => this.formRef = ref}
                            labelCol={{
                                span: 3,
                            }}
                            wrapperCol={{
                                span: 6,
                            }}
                            initialValues={initialValues}
                        >
                            <div className="title">基本信息</div>
                            <Form.Item rules={[{ required: true }]} label="资源位位类型" name="bannerType">
                                <Radio.Group disabled={AdID != 0}>
                                    <Space>
                                        <Radio value={2}>内容首位资源位</Radio>
                                        <Radio value={1}>banner区</Radio>
                                    </Space>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item label="资源位名称" name="bannerName">
                                <Input placeholder="请输入" />
                            </Form.Item>
                            <Form.Item rules={[{ required: true }]} label="跳转链接" name="linkType">
                                <Radio.Group onChange={this.urlChange} >
                                    <Radio value={1}>宠圈动态</Radio>
                                    <Radio value={2}>知识库</Radio>
                                </Radio.Group>
                            </Form.Item>
                            {urlType == 1 &&
                                <Form.Item style={{ marginLeft: '148px' }} rules={[{ required: true }]} label="" name="linkNo">
                                    <Input placeholder="请输入动态编号" />
                                </Form.Item>
                            }
                            <Form.Item rules={[{ required: true }]} label="图片" name="bannerImages"
                            >
                                {/* extra={`仅限jpg,jpeg,png格式文件，大小不超过${maxSize}M`} */}
                                <TheUpload accept={['image/jpg', 'image/jpeg', 'image/png']} {...fileType} maxSize={10}
                                    fileList={fileList} getFileResult={this.getDetailsFileResult} len={1} />
                            </Form.Item>
                            <div className="title">其他信息</div>
                            <Form.Item rules={[{ required: false }]} label="备注" name="remark">
                                <Input />
                            </Form.Item>
                            <Form.Item
                                wrapperCol={{
                                    offset: 4,
                                    span: 16,
                                }}
                            >
                                <Space>
                                    <Button onClick={() => this.props.history.goBack()}>取消</Button>
                                    {/* 添加按钮权限 */}
                                    <Button loading={btnLoading} htmlType="submit" type="primary">保存</Button>
                                </Space>
                            </Form.Item>
                        </Form>
                    </div>
                </div >
                {
                    AdID != 0 && <div className="commodity-list-detail p-layout-box" style={{ marginLeft: "30px", width: '450px', height: "90vh" }}>
                        <div style={{ marginBottom: "20px" }}>操作日志</div>
                        <Timeline>
                            {
                                logArr.map(item => {
                                    return (
                                        <Timeline.Item>
                                            <div>{item.info}
                                                <div className="m-flex" ><div>{item.operationUserName}</div><div>{item.operationTime}</div></div>
                                            </div>
                                        </Timeline.Item>
                                    )
                                })
                            }
                        </Timeline>
                    </div>
                }
            </div>

        );
    }
}

export default Edit;
